{extend name="public:common_edit"/}
{block name="css"}
<style>
    .form-control {
        max-width: 350px;
    }

    .tb-name {
        width: 238px;
    }
    .error{
        color: red;
        margin-top: 10px;
        display: none;
    }
    .select{
        margin-bottom: 10px;
    }
    .doctor{
        display: none;
    }
</style>
{/block}
{block name="main"}
<section class="content">
    <div class="container-fluid">
        <div class="pull-right">
            <a href="javascript:history.go(-1)" data-toggle="tooltip" title="" class="btn btn-default"
               data-original-title="返回"><i class="fa fa-reply"></i></a>
            <a href="javascript:void(0);" class="btn btn-default"
               data-url="javascript:;"
               onclick="get_help(this)"><i class="fa fa-question-circle"></i> 帮助</a>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"><i class="fa fa-list"></i> {$title}</h3>
            </div>
            <div class="panel-body">
                <!--表单数据-->
                <form action="" method="post" enctype="multipart/form-data" class="form-horizontal"
                      id="category_form">

                    <!--通用信息-->
                    <div class="tab-content">
                        <div class="tab-pane active" id="tab_tongyong">
                            <table class="table table-bordered">
                                <tbody>
                                <tr>
                                    <td>封面图片:</td>
                                    <td>
                                        {if !empty($data.img)}
                                        {:uploadHtml('img',$data.img,'single_img')}
                                        {else /}
                                        {:uploadHtml('img',' http://file.mengpaxing.com/ecc5b201901151032276465.png','single_img')}
                                        {/if}
                                    </td>
                                </tr>
                                <tr>
                                    <td>歌名:</td>
                                    <td><input placeholder="歌名" class="form-control" name="song_name" type="text" value="{$data.song_name}"></td>
                                </tr>
                                <tr>
                                    <td>演唱者:</td>
                                    <td><input placeholder="" class="form-control" name="singer" type="text" value="{$data.singer|default='未知艺术家'}"></td>
                                </tr>

                                {if is_numeric(session('user_id'))}
                                <tr>
                                    <td>排序:</td>
                                    <td><input placeholder="排序" class="form-control" name="sort" type="text" value="{$data.sort}"></td>
                                </tr>
                                {/if}

                                <tr>
                                    <td>播放地址:</td>
                                    <td >
                                        <div style="position: relative;max-width: 300px">
                                            <audio autoplay style="max-width: 300px !important;" class="music_url" controls="controls" muted  src="{$data.music_url}">
                                            </audio>
                                            <a style="position: absolute;top: 5%;right: 2%;" class="del" data-url="{$data.music_url}">删除文件</a>
                                        </div>
                                        <input  class="form-control" name="music_url" type="hidden" value="{$data.music_url}">
                                    </td>
                                </tr>
                                <tr>
                                    <td>音乐上传:</td>
                                    <td><input id="file" accept = "audio/mp3" name="file" class="file-container" style="float: left"  type="file" value="音乐上传"><span class="btn btn-primary qiniu">点击上传音乐</span><span style="color: red;">ps:上传音乐前请先删除原文件</span></td>
                                </tr>

                                {if is_numeric(session('user_id'))}
                                <tr>
                                    <td>状态:</td>
                                    <td>
                                        <select class="form-control" name="status">
                                            <option id="status1" value="1">启用</option>
                                            <option id="status0" value="0">禁用</option>
                                        </select>
                                    </td>
                                </tr>
                                {/if}
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="pull-right">
                        <label class="control-label col-sm-2"></label>
                        <input type="hidden" name="id" value="{$data.music_id}">
                        <input class="btn btn-primary submit" type="submit" value="保存">
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
{/block}
{block name="js"}
<script src="/public/plugs/switch-button/js/bootstrap-switch.js"></script>
<script type="text/javascript" src="/public/plugs/jQuery-Tags-Input/src/jquery.tagsinput.js"></script>
<script type="text/javascript" src="https://unpkg.com/qiniu-js@v2.4.0/dist/qiniu.min.js"></script>
<script>

    $(function () {
        var status   = "{$data.status}";
        if(status != ''){
            $('#status'+status).attr('selected',true)
        }
        $('.qiniu').click(function () {
            var file = $('#file')[0].files[0];
            if (!file){
                layer.msg('您未选择文件', {icon: 5, time: 2000});return false;
            }
            var btn = $(this);
            btn.attr('disabled', 'disabled');
            layer.msg('上传中', {
                icon: 16
                ,shade: [0.3,'#999999'],
                time:21600000
            });
            var token = "{$token}";
            var index = file.name.lastIndexOf(".");
            var songName = file.name.substring(0,index);
            var ext = file.name.substring(index);
            var key = takeName('vod',2)+ext;
            var config = {
                useCdnDomain: true,
                region: qiniu.region.z0,
                concurrentRequestLimit:3,
            };
            var putExtra = {
                fname: file.name,
                params: {},
                mimeType:  null
            };
            var observer = {
                next(res){
                    $('.layui-layer-padding').html('<i class="layui-layer-ico layui-layer-ico16"></i>上传中 '+res.total.percent.toFixed(2)+'%');
                },
                error(err){
                    layer.msg('上传失败,请稍后重试'+err.message, {icon: 5, time: 2000});
                    layer.closeAll("loading");
                    btn.attr('disabled', false);
                },
                complete(res){
                    var domain = "{$domain}";
                    var url = domain+'/'+res.key;
                    $('.music_url').attr("src",url);
                    $('.del').attr('data-url',url);
                    $("input[name='music_url']").val(url);
                    $("input[name='song_name']").val(songName);
                    layer.msg('上传成功', {icon: 1, time: 2000});
                    layer.closeAll("loading");
                    btn.attr('disabled', false);
                    removeFile('file');
                }
            };
            var observable = qiniu.upload(file, key, token, putExtra, config)
            var subscription = observable.subscribe(observer)
        });
    })

</script>



{/block}